<template>
  <!--编写页面静态部分，即view部分-->
  <div>
    <!--查询表单-->
    <el-form :model="params">
      <el-select v-model="params.siteId" placeholder="请选择站点">
        <el-option
          v-for="item in siteList"
          :key="item.siteId"
          :label="item.siteName"
          :value="item.siteId">
        </el-option>
      </el-select>
      <el-select v-model="params.templateId" placeholder="请选择模板">
        <el-option
          v-for="item in templateList"
          :key="item.templateId"
          :label="item.templateName"
          :value="item.templateId">
        </el-option>
      </el-select>
      <el-input v-model="params.pageAliase" style="width: 100px" placeholder="页面别名"></el-input>
      <el-input v-model="params.pageName" style="width: 100px" placeholder="页面名称"></el-input>
      <el-input v-model="params.pageType" style="width: 100px" placeholder="页面类型"></el-input>
      <el-button type="primary" size="small" v-on:click="query">查询</el-button>
    </el-form>

    <router-link class="mui-tab-item"
                 :to="{path:'/cms/page/add/',query:{page:params.page,siteId:params.siteId,pageAliase: params.pageAliase}}">
      <el-button type="primary" size="small">新增页面</el-button>
    </router-link>

    <el-table
      :data="list"
      stripe
      style="width:  100%">
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="pageName" label="页面名称" width="120">
      </el-table-column>
      <el-table-column prop="pageAliase" label="别名" width="120">
      </el-table-column>
      <el-table-column prop="pageType" label="页面类型" width="150">
      </el-table-column>
      <el-table-column prop="pageWebPath" label="访问路径" width="250">
      </el-table-column>
      <el-table-column prop="pagePhysicalPath" label="物理路径" width="250">
      </el-table-column>
      <el-table-column prop="pageCreateTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="page">
          <el-button
            size="small" type="text"
            @click="edit(page.row.pageId)">编辑
          </el-button>
          <el-button
            size="small" type="text"
            @click="del(page.row.pageId)">删除
          </el-button>
          <el-button
           size="small" type="text"
           @click="preview(page.row.pageId)">页面预览
         </el-button>
         <el-button
           size="small" type="text"
           @click="post(page.row.pageId)">页面发布
         </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="params.size"
      :current-page="params.page"
      @current-change="handleCurrentChange"
      style="float:right"
    >
    </el-pagination>
  </div>
</template>
<script>
  import * as cmsApi from '../api/cms.js';

  export default {
    methods: {
      query: function () {
        cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
          this.list = res.queryResult.list;
          this.total = res.queryResult.total;
        });
      },
      edit:function (pageId) {

        this.$router.push({
          path: "/cms/page/edit/"+pageId,query:{
            page:this.params.page,
            siteId:this.params.siteId
          }
        })
      },
      // del:function(pageId){
      //   cmsApi.page_del(pageId);
      // },
      // querySiteId: function () {
      //   cmsApi.page_sitelist().then((rest) => {
      //     this.siteList=rest.queryResult.list;
      //   });
      // },
      // queryTemplate: function () {
      //   cmsApi.page_Templatelist().then((rests) => {
      //     this.templateList=rests.queryResult.list;
      //   });
      // },
      handleCurrentChange: function (val) {
        this.params.page = val;
        //alert(val);
        this.query();
      },
      // edit: function (pageId) {
      //   this.$router.push({
      //       path: '/cms/page/edit/' + pageId, query: {
      //       page: this.params.page,
      //       siteId: this.params.siteId
      //     }
      //   })
      // },
      del: function (pageId) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cmsApi.page_del(pageId).then((res)=>{
            if(res.success){
              this.$message.success(res.message);
              this.query();
            }else{
              this.$message.error(res.message);
            }
          });
        })

      },
      preview:function(pageId){
        window.open("http://localhost:31001/cms/preview/"+pageId);
      },
      post:function (id) {
        this.$confirm('确认发布该页面吗?', '提示', {
        }).then(() => {
          cmsApi.page_postPage(id).then((res) => {
            if(res.success){
              console.log('发布页面id='+id);
              this.$message.success('发布成功，请稍后查看结果');
            }else{
              this.$message.error('发布失败');
            }
          });
        }).catch(() => {
        });
      }
     },
    created: function () {
      this.params.page = Number.parseInt(this.$route.query.page || 1);
      this.params.siteId = this.$route.query.siteId || '';
      this.params.pageAliase = this.$route.query.pageAliase || '';
      // this.params.page = Number.parseInt(this.$route.query.page || 1);
      // this.params.siteId = this.$route.query.siteId || '';
    },
    mounted() {
      //初始化站点列表
      this.siteList = [
        {
          siteId: '5a751fab6abb5044e0d19ea1',
          siteName: '门户主站'
        },
        {
          siteId: '5f865ef8b043d8111ca497b2',
          siteName: '课程管理站'
        }
      ],
      // this.querySiteId(),
      //   this.queryTemplate(),
      this.query();
    },
    data() {
      return {
        total: 1,
        params: {
          siteId: '',
          pageAliase: '',
          pageName:'',
          pageType:'',
          templateId: '',
          size: 5,
          page: 1
        },
        siteList: [],
        templateList: [],
        list: []
      }
    }
  }
  /*编写页面静态部分，即model及vm部分。*/
</script>
<style>
  /* 编写页面样式，不是必须 */
</style>
